<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-6">订单结算</h1>
    <div class="flex flex-col lg:flex-row gap-8">
      <div class="lg:w-2/3 space-y-8">
        <div class="bg-white rounded-lg shadow-sm p-6">
          <h2 class="text-xl font-bold mb-4">收货地址</h2>
          <div class="space-y-4">
            <div class="flex items-start p-4 border border-gray-200 rounded-lg hover:border-primary transition-colors cursor-pointer">
              <input type="radio" name="address" id="address1" class="mt-1" checked>
              <label for="address1" class="ml-4 flex-1">
                <div class="font-medium">张三 (默认地址)</div>
                <div class="text-gray-600 mt-1">北京市朝阳区建国路88号 100022</div>
                <div class="text-gray-600 mt-1">13800138000</div>
              </label>
            </div>
            <button class="w-full py-3 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-primary hover:text-primary transition-colors">
              <i class="fa fa-plus mr-2"></i>添加新地址
            </button>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-sm p-6">
          <h2 class="text-xl font-bold mb-4">支付方式</h2>
          <div class="space-y-4">
            <div class="flex items-center p-4 border border-gray-200 rounded-lg hover:border-primary transition-colors cursor-pointer">
              <input type="radio" name="payment" id="payment1" class="mt-1" checked>
              <label for="payment1" class="ml-4 flex items-center">
                <i class="fa fa-credit-card text-blue-500 text-xl mr-2"></i>
                <span>在线支付</span>
              </label>
            </div>
            <div class="flex items-center p-4 border border-gray-200 rounded-lg hover:border-primary transition-colors cursor-pointer">
              <input type="radio" name="payment" id="payment2" class="mt-1">
              <label for="payment2" class="ml-4 flex items-center">
                <i class="fa fa-money text-green-500 text-xl mr-2"></i>
                <span>货到付款</span>
              </label>
            </div>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-sm p-6">
          <h2 class="text-xl font-bold mb-4">订单商品</h2>
          <div class="space-y-4">
            <div v-for="item in cartItems" :key="item.id" class="flex border-b border-gray-200 pb-4">
              <img :src="item.image" :alt="item.name" class="w-20 h-20 object-cover rounded">
              <div class="ml-4 flex-1">
                <div class="flex justify-between">
                  <h3 class="font-medium text-gray-900">{{ item.name }}</h3>
                  <div class="text-right">
                    <div class="font-medium text-gray-900">¥{{ (item.price * item.quantity).toFixed(2) }}</div>
                    <div class="text-gray-500 text-sm">¥{{ item.price }} x {{ item.quantity }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="lg:w-1/3">
        <div class="bg-white rounded-lg shadow-sm p-6 sticky top-24">
          <h2 class="text-xl font-bold mb-4">订单摘要</h2>
          <div class="space-y-3 mb-6">
            <div class="flex justify-between">
              <span class="text-gray-600">商品总价</span>
              <span>¥{{ subtotal.toFixed(2) }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">运费</span>
              <span>{{ shipping }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">优惠</span>
              <span class="text-red-500">-¥{{ discount.toFixed(2) }}</span>
            </div>
            <div class="flex justify-between pt-3 border-t border-gray-200">
              <span class="font-bold">订单总价</span>
              <span class="font-bold">¥{{ total.toFixed(2) }}</span>
            </div>
          </div>
          <button 
            class="w-full bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-md transition-colors font-medium"
            @click="placeOrder"
          >
            提交订单
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()

const cartItems = computed(() => store.getters.cartItems)
const subtotal = computed(() => store.getters.cartSubtotal)
const discount = computed(() => store.getters.cartDiscount)
const shipping = computed(() => store.getters.cartShipping)
const total = computed(() => store.getters.cartTotal)

const placeOrder = () => {
  store.dispatch('placeOrder')
  router.push('/order/success')
}
</script>    